<!DOCTYPE html>
<html>
	<head>
		<title>Nature</title>

		<!-- Latest compiled and minified CSS -->​
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">​

		<!-- jQuery library -->​
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>​

		<!-- Popper JS -->​
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>​

		<!-- Latest compiled JavaScript -->​
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

		<link rel="stylesheet" type = "text/css" href="styles/style.css">

		<link rel="icon" href ="images/favicon.png" type="image/png">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Travel site about Iceland">
		<meta name="keywords" content="travel, Iceland, northern lights, lagoon, geyser">
		<meta name="author" content="Ulrika Höök">
	</head>

	<body>

		<!--Header with navbar-->
		<header class="nav-container">
			<div class="logo">
				<a href="index.html">ICELAND</a>
				<button id="menu-toggle">
					<img src="images/menu.png" id ="menu-img"/>
				</button>
			</div>
			<nav class="nav-bar">
				<a class = "text-button current" href="nature.html">NATURE</a>
				<a class = "text-button" href="history.html">HISTORY</a>
				<a class = "text-button" href="culture.html">CULTURE</a>
				<a class = "text-button" href="places.html">PLACES TO VISIT</a>
				<a class = "text-button" href="travelplan.html">TRAVEL PLAN</a>
			</nav>
		</header>

		<!--Intro picture and text-->
		<section class="intro-container">
				<img class="intro-img" src="images/nature.jpg" alt="nature" title="Nature by Theodor Vasile" />
				<h1 class="intro-header">NATURE</h1>
				<div class="intro-text">
					<h3>Discover the unique nature of Iceland</h3>
					<p>If you are looking for a unique, breathtaking nature experience, </br>Iceland will not make you disappointed.</p>	
				</div>
		</section>

		<!--Boxes with facts-->
		<section class="content-container">

			<img class="nature-img" src="images/volcano2.jpg" alt="volcano" title="Volcano by Marc Szeglet"/>
			<div class="content-header nature-header">
				<p>Volcanos</p>
				<input type="checkbox" class="read" id="read-volcano">
				<label for="read-volcano" class="read-more">
					<img src="images/read-more.png" class="read-more-img"/>
				</label>
				<label for="read-volcano" class="read-less">
					<img src="images/read-less.png" class="read-less-img"/>
				</label>
			</div>
			<div class="nature-content">
				<p>Iceland formed from an eruption on the ocean floor 20 million years ago, and is still one of the most volcanic hotspots in the world. The island owes its existence to a large volcanic fissure in the Mid-Atlantic Ridge, where the Eurasian and American tectonic plates meet. Even today, the country is growing by about 5 cm per year, as it splits wider at the points where two tectonic plates meet.</p>
				<p>On average, Iceland experiences an eruption every five years, but fortunately only rarely where anyone lives. It has been estimated that a third of the planet’s total lava flow over the past 500 years comes from Iceland.</p>
				<p>There are over 100 volcanoes on the island, 35 of which are active. From strato-volcanoes to the shield variety, almost every type of volcano exists here and southern Iceland has the highest concentration of sub-glacial volcanoes in the world.</p>
				<p>Icelanders have learned to constructively coexist with their fiery friends by harnessing volcanic geothermal power to produce clean, renewable energy to heat homes, businesses and of course lovely outdoor swimming pools.</p>
			</div>

			<img class="nature-img" src="images/geyser2.jpg" alt="geyser" title="Geyser by David Köhler"/>
			<div class="content-header nature-header">
				<p>Geysers</p>
				<input type="checkbox" class="read" id="read-geyser">
				<label for="read-geyser" class="read-more">
					<img src="images/read-more.png" class="read-more-img"/>
				</label>
				<label for="read-geyser" class="read-less">
					<img src="images/read-less.png" class="read-less-img"/>
				</label>
			</div>
			<div class="nature-content">
				<p>A geyser is a spring characterized by intermittent discharge of water ejected turbulently and accompanied by steam. As a fairly rare phenomenon, the formation of geysers is due to particular hydrogeological conditions that exist only in a few places on Earth, mostly near active volcanic areas.</p>
				<p>Generally, surface water works its way down to an average depth of around 2,000 metres where it contacts hot rocks. The resultant boiling of the pressurized water results in the geyser effect of hot water and steam spraying out of the geyser's surface vent, like a hydrothermal explosion.</p>
				<p>The biggest and most active geyser on Iceland is Stokkur, located in Geysir Hot Spring Area, which erupts every few minutes</p>
			</div>

			<img class="nature-img" src="images/lagoon2.jpg" alt="lagoon" title="Lagoon by Maarten van den Heuvel"/>
			<div class="content-header nature-header">
				<p>Hot springs and geothermal spas</p>
				<input type="checkbox" class="read" id="read-lagoon">
				<label for="read-lagoon" class="read-more">
					<img src="images/read-more.png" class="read-more-img"/>
				</label>
				<label for="read-lagoon" class="read-less">
					<img src="images/read-less.png" class="read-less-img"/>
				</label>
			</div>
			<div class="nature-content">
				<p>Due to gethermal activity, hot springs occur naturally. Some of Iceland's hot springs are boiling hot fumaroles, bubbling mud pits or spouting geysers, but others are calm pools of water that have the perfect temperature in which to bathe.</p>
				<p>Many of those have been transformed into popular bathing spots, like the Blue Lagoon with its light blue, milky water full of minerals like silica and algae and with the perfect temperature of 38-39°C. Others remains natural hot springs with no other facilities in place.</p>
			</div>

		</section>

		<!--Footer with cred to photo and icon providers-->
		<footer>					
				<div class="attribution-section">
					Menu icon made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect" target="_blank">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon" target="_blank">www.flaticon.com</a>
				</div>
				<div class="attribution-section">
					Favicon and other icons by <a href="https://www.icons8.com/" title="Icons8" target="_blank">www.icons8.com</a>
				</div>
				<div class="attribution-section">
					Photos from <a href="https://www.unsplash.com/" title="Unsplash" target="_blank">www.unsplash.com</a>
				</div>
		</footer>

		<script src="script/jquery.js"></script>
		<script src="script/main.js"></script>
	</body>
</html>